<template>
  <div class="rankdetails" :class="{ loading: !showItem }">
    <Loading v-if="!showItem"></Loading>
    <template v-else>
      <div class="back">
        <img src="../assets/c3h.png" @click="toback" />
        <span>歌单</span>
      </div>
      <RankHeader :list="detailList" :showItem="showItem"></RankHeader>
      <div class="songlist">
        <h1 class="songtitle">歌曲列表</h1>
        <SongItem
          v-for="(item, index) in detailList.tracks"
          :key="item.id"
          :item="item"
          :num="index"
          :playingStatus="playingStatus"
          :selectedSong="selectedSong"
          @play-song="$emit('play-song', $event, detailList.tracks)"
        ></SongItem>
      </div>
    </template>
  </div>
</template>

<script>
import RankHeader from "@/components/RankHeader.vue";
import SongItem from "@/components/SongItem.vue";
import Loading from "@/components/Loading.vue";
export default {
  props: ["playingStatus", "selectedSong", "lastrouter"],
  components: {
    RankHeader,
    SongItem,
    Loading,
  },
  data: function () {
    return {
      detailList: {},
      showItem: false,
      songid: null,
    };
  },
  created: function () {},
  watch: {
    songid(n) {
      this.showItem = false;
      this.axios
        .get("https://apis.netstart.cn/music/playlist/detail?id=" + n)
        .then((res) => {
          this.detailList = res.data.playlist;
          this.showItem = true;
        });
    },
  },
  methods: {
    toback() {
      this.$router.push({ path: this.lastrouter });
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log(to, from);
    next((vm) => {
      if (from.name != "Comment") {
        vm.songid = to.query.id;
        vm.$emit("change-lastrouter", from.fullPath);
      }
    });
  },
};
</script>

<style lang="less" scoped>
.rankdetails {
  margin-top: 0;
  position: relative;
  .back {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    display: flex;
    align-items: center;
    img {
      width: 25px;
      height: 25px;
    }
    span {
      // width: 10vw;
      // position: absolute;
      margin-left: 10px;
      color: #fff;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    }
  }
  &.loading {
    margin-top: 40vh;
  }
  .songtitle {
    width: 100%;
    padding: 3px 10px;
    font-size: 12px;
    color: #666;
    background-color: #eeeff0;
  }
}
</style>